<template>
	<view class="page_box">
		<u-navbar :is-back="true" title=" " v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="bg-img img padding  flex flex-direction justify-center">
				<text class="f40 text-bold">绑定手机号</text>
			</view>
			
			<u-form :model="form" ref="uForm">
				<u-form-item :border-bottom="false" prop="password">
					<view class="form-content padding">
						<view class="flex align-center">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_pas.png" class="ico_pas"></image>
							<text class="margin-left-sm">密码</text>
						</view>
						<view class="u-border-bottom margin-top-lg padding-bottom flex justify-between align-center">
							<u-input 
								v-model="form.password" 
								type="password" 
								:clearable="false" 
								:border="false" 
								placeholder="请输入登录密码"
								placeholder-style="color:#BDBDBD;font-size: 24rpx;"
								class="form-input"
							/>
						</view>
					</view>					
				</u-form-item>
				<u-form-item :border-bottom="false" prop="invitationCd">
					<view class="form-content padding">
						<view class="flex align-center">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yqm.png" class="ico_yqm"></image>
							<text class="margin-left-sm">邀请码</text>
						</view>
						<view class="u-border-bottom margin-top-lg padding-bottom flex justify-between align-center">
							<u-input 
								v-model="form.invitationCd" 
								type="number" 
								:clearable="false" 
								:border="false" 
								placeholder="请输入邀请码" 
								placeholder-style="color:#BDBDBD;font-size: 24rpx;"
								class="form-input"
							/>
						</view>
					</view>					
				</u-form-item>	
				<u-form-item :border-bottom="false">
					<view class="form-content padding margin-top-lg">
						<button class="login-btn circle-btn" @click="determine">确定</button>
					</view>					
				</u-form-item>
			</u-form>
		</view>
		
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{
				password:'',
				invitationCd:'',
			},
			rules: {
				password: [
					{
						required: true, 
						message: '请设置登录密码', 
						trigger: 'blur'
					}
				],
				invitationCd: [
					{
						required: true, 
						message: '请输入邀请码', 
						trigger: 'blur'
					}
				],
			},
			checked:true,
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onShow() {},
	onLoad(e) {},
	methods: {
		determine(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log(this.form);
					uni.showToast({
						title: '绑定成功',
						icon: 'none',
					})
				}
			});			
		}
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	.img {
		width: 100vw;
		height: 200rpx;
	}
	.form-content{
		padding-bottom: 0;
	}
	.ico_tel{
		width: 26rpx;
		height: 38rpx;
	}
	.form-input{
		padding-left: 46rpx;
		width: 100%;
	}
	.ico_yqm{
		width: 32rpx;
		height: 32rpx;
	}
	.ico_yj{
		width: 20rpx;
		height: 12rpx;
	}
	.ico_pas{
		width: 28rpx;
		height: 38rpx;
	}
	button::after{
		border: 0;
	}
	.circle-btn{
		border-radius: 45rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 90rpx;
	}
	.login-btn{
		background: #4a515b;
		color: #FFFFFF;
	}
	.position-bottom{
		width: 100%;
		position: absolute;
		bottom: 30rpx;
	}

	

	

	

	
}
</style>